<!-- 铜厂报表 -->
<template>
  <div>
    <!-- 检索框 -->
    <el-form :inline="true">
      <el-form-item>
        <el-input
          clearable
          v-model="searchForm.username"
          placeholder="报表信息"
        ></el-input>
      </el-form-item>
      <el-date-picker
        v-model="selectTime"
        type="daterange"
        value-format="yyyy-MM-dd HH:mm:ss"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>
      <el-form-item>
        <el-button type="primary" plain @click="getUserList">搜索</el-button>
      </el-form-item>
    </el-form>
    <!-- margin-left: 215px; margin-top: 175px; -->

    <div
      id="luckysheet"
      style="margin-left: 215px;margin-top: 175px;position:absolute;width:88%;height:80%;left: 0px;top: 0px;"
    ></div>
  </div>
</template>

<script>
//这里可以导入其他文件(比如:组件、工具js、)
//例如：import 组件名 from '组件路径'
export default {
  //import引入的组件需要注入到对象中才能使用
  data() {
    return {
      searchForm: [],
      selectTime: [],
      tableName: "铜厂报表",
      tableValue: [
        {
          r: 0, //行
          c: 0, //列
          v: {
            ct: { fa: "General", t: "g" }, //单元格值格式 fa: 格式名称为自动格式  t: 格式类型为数字类型
            m: "名称", //内容的显示值
            v: "名称", //内容的原始值
            ht: 0, //水平居中
            vt: 0 //垂直居中
          }
        },
        {
          r: 1, //行
          c: 0, //列
          v: {
            ct: { fa: "General", t: "g" }, //单元格值格式 fa: 格式名称为自动格式  t: 格式类型为数字类型
            m: "产地", //内容的显示值
            v: "产地", //内容的原始值
            ht: 0, //水平居中
            vt: 0 //垂直居中
          }
        },
        {
          r: 2, //行
          c: 0, //列
          v: {
            ct: { fa: "General", t: "g" }, //单元格值格式 fa: 格式名称为自动格式  t: 格式类型为数字类型
            m: "日期", //内容的显示值
            v: "日期", //内容的原始值
            ht: 0, //水平居中
            vt: 0 //垂直居中
          },
          mc: {
            r: 2, //主单元格行号
            c: 0, //主单元格列号
            rs: 2, //合并单元格占的行数
            cs: 1 //合并单元格占的列数
          }
        },
        {
          r: 1,
          c: 1,
          v: {
            ct: { fa: "General", t: "g" },
            m: "贵金属银卸料",
            v: "贵金属银卸料",
            bg: "#FCD5B4",
            ht: 0, //水平居中
            vt: 0 //垂直居中
          },
          mc: {
            r: 1,
            c: 1,
            rs: 2,
            cs: 2
          }
        },
        {
          r: 3,
          c: 1,
          v: {
            ct: { fa: "General", t: "g" },
            m: "厂5/3",
            v: "厂5/3",
            bg: "#FCD5B4",
            ht: 0, //水平居中
            vt: 0 //垂直居中
          }
        },
        {
          r: 3,
          c: 2,
          v: {
            ct: { fa: "General", t: "g" },
            m: "吨位",
            v: "吨位",
            bg: "#FCD5B4",
            ht: 0, //水平居中
            vt: 0 //垂直居中
          }
        },
        {
          r: 1,
          c: 3,
          v: {
            ct: { fa: "General", t: "g" },
            m: "贵金属测试废料",
            v: "贵金属测试废料",
            bg: "#FCD5B4",
            ht: 0, //水平居中
            vt: 0 //垂直居中
          },
          mc: {
            r: 1,
            c: 3,
            rs: 2,
            cs: 2
          }
        },
        {
          r: 3,
          c: 3,
          v: {
            ct: { fa: "General", t: "g" },
            m: "厂5/3",
            v: "厂5/3",
            bg: "#FCD5B4",
            ht: 0, //水平居中
            vt: 0 //垂直居中
          }
        },
        {
          r: 3,
          c: 4,
          v: {
            ct: { fa: "General", t: "g" },
            m: "吨位",
            v: "吨位",
            bg: "#FCD5B4",
            ht: 0, //水平居中
            vt: 0 //垂直居中
          }
        },
        {
          r: 1,
          c: 5,
          v: {
            ct: { fa: "General", t: "g" },
            m: "除铜废料",
            v: "除铜废料",
            bg: "#FCD5B4",
            ht: 0, //水平居中
            vt: 0 //垂直居中
          },
          mc: {
            r: 1,
            c: 5,
            rs: 2,
            cs: 2
          }
        },
        {
          r: 3,
          c: 5,
          v: {
            ct: { fa: "General", t: "g" },
            m: "厂10外",
            v: "厂10外",
            bg: "#FCD5B4",
            ht: 0, //水平居中
            vt: 0 //垂直居中
          }
        },
        {
          r: 3,
          c: 6,
          v: {
            ct: { fa: "General", t: "g" },
            m: "吨位",
            v: "吨位",
            bg: "#FCD5B4",
            ht: 0, //水平居中
            vt: 0 //垂直居中
          }
        }
      ]
    };
  },

  components: {},

  computed: {},

  mounted() {
    //
    var that = this;

    $(function() {
      luckysheet.create({
        rowHeaderWidth: 80,
        container: "luckysheet",
        title: "Luckysheet Demo", // 设定表格名称
        lang: "zh", // 设定表格语言
        showinfobar: false, //  是否显示顶部信息栏
        enableAddRow: false, //允许添加行
        sheetFormulaBar: true,
        data: [
          {
            name: that.tableName, //工作表名称
            row: 56, //行数
            column: 22, //列数
            status: 0,
            defaultRowHeight: 19, //自定义行高
            defaultColWidth: 73, //自定义列宽
            celldata: that.tableValue,
            config: {
              merge: {
                //r:行数，c:列数，rs：合并的行数，cs:合并的列数
                "2_0": {
                  r: 2,
                  c: 0,
                  rs: 2,
                  cs: 1
                },
                "1_1": {
                  r: 1,
                  c: 1,
                  rs: 2,
                  cs: 2
                },
                "1_3": {
                  r: 1,
                  c: 3,
                  rs: 2,
                  cs: 2
                },
                "1_5": {
                  r: 1,
                  c: 5,
                  rs: 2,
                  cs: 2
                }
                // "0_3": {
                //   r: 0,
                //   c: 3,
                //   rs: 3,
                //   cs: 3
                // }
              }, //合并单元格
              rowlen: {}, //表格行高
              columnlen: {}, //表格列宽
              borderInfo: [
                {
                  rangeType: "range",
                  borderType: "border-all",
                  style: "1",
                  color: "#000",
                  range: [
                    {
                      row: [0, 56],
                      column: [0, 22]
                    }
                  ]
                }
              ]
            }
          }
        ]
      });
    });
  },

  methods: {
    // init() {
    //   var options = {
    //     container: "lucksheet"
    //   };
    //   luckysheet.create(options);
    // },
    getUserList() {
      console.log(this.tableValue);
      let date = {
        startTime: this.selectTime[0],
        endTime: this.selectTime[1]
      };

      this.searchForm.date = date;
      console.log(this.searchForm);
      // console.log(this.selectTime);
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // this.init();
  }
};
</script>
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
